<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}
		.top{
			width: 100%;
			display: flex;
			margin: 10px;
			position: relative;
		}
		.top #span{
			margin: 5px;
			width: 100px;
			height: 35px;
			line-height: 35px;
			text-align: center;
			background: red;
			color: #fff;
		}
		#div{
			position: absolute;
			top: 50px;
			left: 20px;
			width: 100px;
			height: 100px;
			background: #fff;
			border: 5px inset #ccc;
		}
		#ul{
			position: absolute;
			top: 140px;
			left: 500px;
			border: 20px solid rgba(208, 208, 208, 0.4);
			/* display: none; */
		}
		#ul li {
			display: flex;
			margin: 10px;
			line-height: 40px;
		}
		#ul li div + div{
			width: 40px;
			margin: 2px;
			line-height: 35px;
			text-align: center;
			border: 1px solid #ccc;
			background: rgba(208, 208, 208, 0.4);
		}
		#ul li div + div:hover{
			background: #13CE66;
		}
		#ul .color div:nth-child(2){
			color: #fff;
			background: rgba(255, 85, 0, 0.7);
		}
		#ul .color div:nth-child(3){
			color: #fff;
			background:rgba(193, 193, 0, 0.7);
		}
		#ul .color div:nth-child(4){
			color: #fff;
			background: rgba(0, 170, 0, 0.7);
		}
		#ul .color div:nth-child(2):hover{
			background: rgba(230, 0, 0, 0.9);
		}
		
		#ul .color div:nth-child(3):hover{
			color: #000;
			background:rgba(252, 252, 0, 0.9);
		}
		#ul .color div:nth-child(4):hover{
			background: rgba(0, 85, 0, 0.9);
		}
		#btn{
			display: flex;
			justify-content: space-around;
		}
	</style>
</head>
<body>
	<div class="top">
		<h2>请为下面的div设置样式：</h2>
		<span id="span">点击设置</span>
		<ul id="ul">
			<li class="color">
				<div>选择背景色:</div>
				<div>红</div>
				<div>黄</div>
				<div>绿</div>
			</li>
			<li class="width">
				<div>选择宽(px):</div>
				<div>200</div>
				<div>300</div>
				<div>400</div>
			</li>
			<li class="height">
				<div>选择高(px):</div>
				<div>200</div>
				<div>300</div>
				<div>400</div>
			</li>
			<li id="btn">
				<button type="reset" >恢复</button>
				<button type="submit">确定</button>
			</li>
		</ul>
		<div id="div"></div>
	</div>
	
	<script type="text/javascript">
		var span = document.getElementById('span');
		var ul = document.getElementById('ul');
		var div = document.getElementById('div');
		
		span.onclick = function (){
			ul.style.display = 'block'
		}
		
		var color = document.querySelectorAll('.color div');
		
		color[1].onclick = function(){
			div.style.background = 'red'
		}
		color[2].onclick = function(){
			div.style.background = 'yellow'
		}
		color[3].onclick = function(){
			div.style.background = 'green'
		}
		
		var width = document.querySelectorAll('.width div');
		
		width[1].onclick = function(){
			div.style.width = '200px'
		}
		width[2].onclick = function(){
			div.style.width = '300px'
		}
		width[3].onclick = function(){
			div.style.width = '400px'
		}
		
		var height = document.querySelectorAll('.height div');
		
		height[1].onclick = function(){
			div.style.height = '200px'
		}
		height[2].onclick = function(){
			div.style.height = '300px'
		}
		height[3].onclick = function(){
			div.style.height = '400px'
		}
		
		var btn = document.querySelectorAll('button');
		
		btn[0].onclick = function(){
			div.style.width = '100px'
			div.style.height = '100px'
			div.style.background = '#fff'
		}
		btn[1].onclick = function(){
			ul.style.display = 'none'
			
		}
		
		
		
	</script>
</body>
</html>